<%= turbo_frame_tag dom_id(line_item) do %>
  <li class="cart-line-item flex items-top py-6 px-4 w-full">
    <div class="line-item-overlay"></div>
      <div class="cart-product-image shrink-0" id="<%= dom_id(line_item) %>-image" data-turbo-permanent>
        <% image = line_item.variant.default_image %>
        <% if image.present? && image.attached? && image.variable? %>
          <%= link_to spree_storefront_resource_url(line_item.product), data: { 'turbo-frame': '_top' } do %>
            <%= spree_image_tag(image, width: 128, height: 128, variant: :small, class: 'object-cover', loading: :lazy) %>
          <% end %>
        <% else %>
          <div class="w-32 h-32 bg-accent"></div>
        <% end %>
      </div>
      <div class="ml-3 w-full">
        <div class="flex justify-between">
          <%= link_to line_item.name, spree_storefront_resource_url(line_item.product), class: 'font-semibold text-text', data: { 'turbo-frame': '_top' } %>

          <%= form_for line_item, url: spree.line_item_url(line_item, order_token: line_item.order.token), method: :delete, data: { controller: 'turbo-stream-form' } do |item_form| %>
            <%= button_tag type: :submit, class: 'remove-line-item-button', data: { action: "click->cart#disableCart turbo-stream-form:submit-end->cart#enableCart" } do %>
              <%= render 'spree/shared/icons/cross', size: 16 %>
            <% end %>
          <% end %>
        </div>
        <div class="mb-2 text-sm">
          <% if line_item.variant.on_sale?(current_currency) %>
            <span class="">
              <del><%= line_item.variant.display_compare_at_price %></del>
            </span>
            <span class="text-danger">
              <%= line_item.display_price %>
            </span>
          <% else %>
            <span><%= line_item.display_price %></span>
          <% end %>
        </div>
        <div class="flex flex-wrap gap-2">
          <%= render 'spree/shared/line_item_options', line_item: line_item %>
        </div>
      <div class="flex flex-row-reverse w-full mt-3">
        <%= render 'spree/orders/line_item_quantity', line_item: line_item %>
      </div>
      <% if !line_item.variant.backorderable? && line_item.variant.total_on_hand < 5 %>
        <div class="text-sm -mt-5 text-center text-danger" style="width: 117px">
          <%= Spree.t(:only_left, count: line_item.variant.total_on_hand) %>
        </div>
      <% end %>
    </div>
  </li>
<% end %>
